let table = document.querySelector('table')
let checkall = document.querySelector('.checkall')
let yixuan = document.querySelector('.yixuan')
let heji = document.querySelector('.heji')
let shancs = document.querySelector('.shancs')
let gwcp = document.querySelector('.gwcp')
let jiesuan = document.querySelector('.jiesuan')
// console.log(heji)

function xuanran() {
    let arr = JSON.parse(localStorage.getItem('shangping'))

    if (arr.length != 0) {
        gwcp.style.display='none'
        jiesuan.style.display = 'block'
    } else {
        jiesuan.style.display = 'none'//只加隐藏即可，因为数据不为空，渲染就显示出来了
        table.style.display='none'
        gwcp.style.display='block'
     
    }
    let str = arr.map(function (item) {
        return `
    <tr>
    <td><input type="checkbox" ${item.is_select?'checked':''} data-id="${item.goods_id}"></td>
    <td> <img src="${item.img_small_logo}" alt=""> </td>
    <td>${item.price}</td>
    <td><button class="jian" data-id="${item.goods_id}">-</button><input type="text" value="${item.cart_number}"><button class="jia" data-id="${item.goods_id}">+</button></td>
    <td class="jizhang">${(item.price*item.cart_number).toFixed(2)}元</td>
    <td><a href="" class='sc' data-id="${item.goods_id}">删除</a></td>
    </tr>`
    }).join('')
    let toubu = ` <tr>
        <td>全选</td>
        <td>商品</td>
        <td>单价</td>
        <td>数量</td>
        <td>小计</td>
        <td>操作</td>
            </tr>`
    table.innerHTML = toubu + str

}
xuanran()
//实现加

table.addEventListener('click', function (e) {

    e = e || window.event
    let target = e.target || e.srcElement
    //实现加
    if (target.getAttribute('class') == 'jia') {

        let id = target.dataset.id

        let arr = JSON.parse(localStorage.getItem('shangping'))

        let product = arr.find(function (item) {
            return item.goods_id == id

        })
        product.cart_number++

        localStorage.setItem('shangping', JSON.stringify(arr))
        xuanran()
        yx()
    }
    //实现减
    if (target.getAttribute('class') == 'jian') {

        let id = target.dataset.id

        let arr = JSON.parse(localStorage.getItem('shangping'))

        let product = arr.find(function (item) {
            return item.goods_id == id
        })
        product.cart_number > 1 ? product.cart_number-- : product.cart_number
        localStorage.setItem('shangping', JSON.stringify(arr))
        xuanran()
        yx()
    }
    // 实现删除
    if (target.getAttribute('class') == 'sc') {
        let id = target.dataset.id


        let arr = JSON.parse(localStorage.getItem('shangping'))
        let p = arr.findIndex(function (item) {
            return item.goods_id == id
        })
        arr.splice(p, 1)
        localStorage.setItem('shangping', JSON.stringify(arr))
        xuanran()


    }
    //实现复选
    if (target.getAttribute('type') == 'checkbox') {
        let id = target.dataset.id
        let arr = JSON.parse(localStorage.getItem('shangping'))
        let product = arr.find(function (item) {
            return item.goods_id == id
        })
        product.is_select = !product.is_select
        let tate = arr.every(function (item) {
            return item.is_select == true
        })
        if (tate) {
            checkall.checked = true
        } else {
            checkall.checked = false

        }

        localStorage.setItem('shangping', JSON.stringify(arr))

        xuanran()
        yx()


    }
    return false

})
//实现全选
function quanxuan() {
    // let checkall = document.querySelector('.checkall')
    checkall.onclick = function () {
        let quan = checkall.checked
        let arr = JSON.parse(localStorage.getItem('shangping'))
        arr.forEach(item => {
            item.is_select = quan
        });
        localStorage.setItem('shangping', JSON.stringify(arr))
        xuanran()
        yx()
        zsc()
    }



}
quanxuan()
//最下面的删除
function zsc() {
    shancs.onclick = function (e) {
        e = e || window.event

        let arr = JSON.parse(localStorage.getItem('shangping'))
        arr = arr.filter(function (item) {
            return item.is_select != true
        })
        console.log(arr)
        localStorage.setItem('shangping', JSON.stringify(arr))
        xuanran()
        yx()
        return false

    }

}
zsc()
//已选商品
function yx() {
    let arr = JSON.parse(localStorage.getItem('shangping'))
    arr = arr.filter(function (item) {
        return item.is_select == true
    })
    // console.log(arr)
    let sum = 0
    let total = 0
    arr.forEach(function (item) {
        sum = sum + item.cart_number
        total = total + item.price * item.cart_number
    })
    total = total.toFixed(2)
    yixuan.innerText = '已选商品' + sum + '件'
    heji.innerText = total + '元'
}